<template>
  <div class="firstpage">
    <div class="firstpage-header">
      <div>
        <el-descriptions
          class="margin-top"
          title=""
          :column="2"
          direction="vertical"
        >
          <el-descriptions-item label="本月支出"> 500元 </el-descriptions-item>
          <el-descriptions-item label="本月存款" :span="2">
            181000元
          </el-descriptions-item>
          <el-descriptions-item label="最近目标">
            支出低于5000元
          </el-descriptions-item>
          <el-descriptions-item label="分类数量"> 500个 </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <div class="ball ball1"></div>
        <div class="ball ball2"></div>
        <div class="ball ball3"></div>
      </div>
    </div>
    <div
      ref="chart"
      style="width: 80%; min-width: 700px; height: 700px; margin: 20px auto"
    ></div>
    <div
      ref="chart1"
      style="width: 80%; min-width: 700px; height: 576px; margin: 20px auto"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getEchartData();
    this.getEchartData1();
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          title: [
            {
              text: "今年存款数据对比图",
            },
          ],
          polar: {
            radius: [30, "80%"],
          },
          radiusAxis: {
            max: 4000,
          },
          angleAxis: {
            type: "category",
            data: ["1月", "2月", "3月", "4月"],
            startAngle: 75,
          },
          tooltip: {},
          series: {
            type: "bar",
            data: [2000, 1200, 2400, 3600],
            coordinateSystem: "polar",
            label: {
              show: true,
              position: "middle",
              formatter: "{b}: {c}",
            },
          },
          animation: false,
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    getEchartData1() {
      const chart = this.$refs.chart1;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          title: [
            {
              text: "今年支出数据对比图",
            },
          ],
          legend: {
            top: "bottom",
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              name: "Nightingale Chart",
              type: "pie",
              radius: [50, 250],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 40,
              },
              borderWidth: 0.1,
              data: [
                { value: 40, name: "1月" },
                { value: 38, name: "2月" },
                { value: 32, name: "3月" },
                { value: 30, name: "4月" },
              ],
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
.firstpage-header {
  position: relative;
  height: 500px;
}
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  font-weight: 800;
  line-height: 1.5;
}
.el-descriptions {
  width: 60%;
  box-sizing: border-box;
  font-size: 25px;
  color: #303133;
  font-weight: bold;
  padding: 80px;
}
.ball {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  transition: all 2s;
}
.ball1 {
  background: radial-gradient(
    circle at 124px 3px,
    #5babd1,
    #5babd1,
    #3689c0,
    #5babd1,
    #386a8b,
    #666
  );
  box-shadow: 0px -5px 40px #5babd1;
  position: absolute;
  top: 100px;
  right: 34%;
  width: 15vw;
  height: 15vw;
  min-width: 200px;
  min-height: 200px;
  animation-name: ball-example;
  animation-duration: 4s;
}
@keyframes ball-example {
  from {
    transform: rotate(397deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.ball1:hover {
  box-shadow: 0px -15px 80px #5babd1;
}
.ball2 {
  background: radial-gradient(
    circle at 10px 3px,
    #b7baaf,
    #c9c5cf,
    #938b90,
    #b3af9c,
    #524729,
    #666
  );
  box-shadow: 0px -5px 40px #b7baaf;
  position: absolute;
  top: 100px;
  right: 30%;
  width: 10vw;
  height: 10vw;
  min-width: 100px;
  min-height: 100px;
  animation-name: ball-example;
  animation-duration: 5s;
}
.ball2:hover {
  box-shadow: 0px -5px 68px #b7baaf;
}
.ball3 {
  background: radial-gradient(
    circle at 10px 3px,
    #dfabdf,
    #916e91,
    #692d50,
    #6b344b,
    #3f1818,
    rgb(70, 27, 27)
  );
  box-shadow: 0px 0px 30px #a38ea3;
  position: absolute;
  top: 200px;
  right: 26%;
  width: 6vw;
  height: 6vw;
  min-width: 50px;
  min-height: 50px;
  animation-name: ball-example;
  animation-duration: 3s;
}
.ball3:hover {
  box-shadow: 0px -5px 48px #e9b2e9;
}
</style>
<style>
.el-descriptions-item__content {
  color: #097ac5;
  font-size: 30px;
}
</style>